<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <title>软装到家</title>
    <script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
     <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
     <style type="text/css">
	    .layui-layer-dialog .layui-layer-content {
			color:black;
		}
	    
    </style>
</head>

<body>
<div class="simple-nav reg-nav">
	<div class=" w-1200 margin-0-auto">
    	<img class="fl reg-logo" src="${ctx }/res/img/icon/payment-logo.png">
    </div>
</div>
<form id="page_form">
	<input type="hidden" name="returnCode" value="${wxData.returnCode}" />
	<input type="hidden" name="returnMsg" value="${wxData.returnMsg}" />
	<input type="hidden" name="appid" value="${wxData.appid}" />
	<input type="hidden" name="mchid" value="${wxData.mchid}" />
	<input type="hidden" name="noncestr" value="${wxData.noncestr}" />
	<input type="hidden" name="sign" value="${wxData.sign}" />
	<input type="hidden" name="resultCode" value="${wxData.resultCode}" />
	<input type="hidden" name="prepayId" value="${wxData.prepayId}" />
	<input type="hidden" name="tradeType" value="${wxData.tradeType}" />
	<input type="hidden" name="codeUrl" value="${wxData.codeUrl}" />
	<input type="hidden" name="paymentNo" value="${paymentNo}" />
	<input type="hidden" name="payBizType" value="${payBizType}" />
</form>
<div class="factory-reg-body">
    <div class="w-1200 margin-0-auto wxpay">
        <div class="payment_dd">
        	<div class="fl">
                <p>请您及时付款，以便订单尽快处理！订单号：${order.orderNo }</p>
                <p>请您在提交订单后<span class="text-red">7小时</span>内完成支付,否则订单会自动取消。</p>
            </div>
            <div class="fr" style="padding-right:50px">
                <p>应付金额 <strong><fmt:formatNumber value="${amount }" type="currency" pattern="0.00"/></strong> 元</p>
                <p><a class="text-blue js-show-more">订单详情</a></p>
                <p><a class="text-blue" onclick="checkStatus(false);" style="cursor:pointer;color:red;">我已支付，点我</a></p>
            </div>
            <p class="link"><a href="#">切换支付方式</a></p>
        </div>
        <div class="payment-content">
            <div class="js-order-detail order-detail">
                <p>收货地址：${order.address } 收货人：${order.receiveName } ${order.receiveMobile }</p>
                <p>商品名称：${payDetal }</p>
            </div>
            <h3>微信支付</h3>
            <div class="fl" style="margin-left: 140px;">
                <div class="qrcode">
                    <img src="${ctx }/wxpay/qrCode?url=${payUrl}"/>
                </div>
                <img src="${ctx }/res/img/icon/pay-tag.png">
               <!--  <button class="button btn btn-default myorder" onclick="checkStatus();">我已支付</button> -->
                <!-- <div>
                	<a class="btn reg-designer" onclick="checkStatus();" style="cursor:pointer;">我已支付</a>
                </div> -->
            </div>
            <div class="fl" style="margin-left: 64px;">
                <img src="${ctx }/res/img/icon/pay-iphone.png">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
	timer1 = null;
	//两秒一次，去检查支付成功状态
    timer1 = setInterval(function () {
   	 checkStatus(true);
    },5000);

	 $(document).on('click','.js-show-more',function () {
         $(".js-order-detail").toggle();
     });
	 
    function checkStatus(flag) {   //查询内容
    	var formObj = $('#page_form');
    	info = $('#page_form').serializeArray();
    	var json = {};
    	for(var i = 0;i < info.length; i ++ ) {
    		var theArr = info[i];
    		var key = theArr.name;
    		var value = theArr.value;
    		json[key] = value;
    	} 
    	$.ajax({
    		url: "${ctx}/pay/checkWxPayStatus",
    		//url: "${ctx}/pay/notificationWX",
    		data:json,
    		dataType: "json",
    		type: "post",
    		success: function(data) {
    			if (data.success) {
    				//loading带文字
    				if(flag) {
    					layer.msg('支付成功，正在跳转至成功页面...',{time: 3000, icon:6,shade: [0.5, '#f5f5f5']});
    					var bizType = $('input[name="payBizType"]').val();
        				location = '${ctx }/pay/gotoSuccess?payBizType='+bizType;
    				} else {
    					layer.msg('支付成功，正在跳转至订单页面...',{time: 3000, icon:6,shade: [0.5, '#f5f5f5']});
        				location = '${ctx }/admin/index?target=/order/myOrder';
    				}
    			} else {
    				if(!flag) {
    					layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
    				}
    			}
    		}
    	});
    	return false;
	}
</script>
<%@include file="../foot.jsp" %>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
    }); 
</script>
</body>
</html>
